<template>
	<div class="anim">
		<button @click="change">切换</button>

		<!-- 过渡 -->
		<transition name="fade">	
			<p v-show="show">哈哈</p>
		</transition>
	</div>
</template>
<script>
	export default {
		name:"anim",
		data(){
			return{
			  show: true
			}
		},
		methods: {
			change: function (event) {
				this.show = !this.show;
			}
		},
		components: {
		
		},
		computed: {
			
		}
	}
</script>
<style scoped>
	/* .fade-enter-active, .fade-leave-active {
	  		transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to .fade-leave-active below version 2.1.8 {
	 	 opacity: 0;
	} */

	/*从0-1的过程*/
	.fade-enter-active, .fade-leave-active{
		transition: all 2s;
	}
	
	.fade-enter,.fade-leave-to {
		/*opacity: 0;*/
		/*过渡*/
		transform: translate(100px,0);
	}

	.fade-enter-to,.fade-leave {
		/*opacity: 1;*/
		transform: translate(0px,0);
	}
</style>